<template>
  <div class="view-container">
    <!--面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>后台设置</el-breadcrumb-item>
      <el-breadcrumb-item>菜单</el-breadcrumb-item>
    </el-breadcrumb>
    <ShoBlock title="菜单" ></ShoBlock>
    <!-- 添加菜单 -->
    <div class="Select">
      <el-button type="success" @click="AddMenuView = true">添加菜单</el-button>
    </div>
    <!-- 菜单展示 -->
    <span>一级菜单</span>
    <el-tree :data="dataSource" show-checkbox :props="defaultProps" :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}/{{data.apimenu}}</span>
          <span>
            <span @click="Index(data); DeleteMenuView = true">删除</span>
          </span>
        </span>
      </template>
    </el-tree>
    <span>二级菜单</span>
    <el-tree :data="dataSource_second" show-checkbox :props="defaultProps" :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}/{{data.apimenu}}/{{ data.menu_guid }}</span>
          <span>
            <span @click="Index(data); AddMenu_srcond_sonView = true">添加</span>
            <span @click="Index(data); DeleteMenuView = true">删除</span>
          </span>
        </span>
      </template>
    </el-tree>
    <span>二级菜单-子</span>
    <el-tree :data="dataSource_second_son" show-checkbox :props="defaultProps_second" :expand-on-click-node="false">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}/{{data.apimenu}}/{{ data.menu_guid }}</span>
          <span>
            <span @click="Index(data); DeleteMenu_second_sonView = true">删除</span>
          </span>
        </span>
      </template>
    </el-tree>
  </div>
  <AddMenu v-model="AddMenuView" />
  <AddMenu_second_son v-model="AddMenu_srcond_sonView" :data="Row" />
  <DeleteMenu v-model="DeleteMenuView" :data="Row" />
  <DeleteMenu_second_son v-model="DeleteMenu_second_sonView" :data="Row" />
</template>
<script setup lang="ts">
import ShoBlock from '../../component/ShoBlock.vue'
import { ref, reactive, onMounted } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { getMenuList_first, getAllMenuList_second_son, getMenuList_second } from '../../service/Menu.js'
import DeleteMenu from './component/DeleteMenu.vue'
import DeleteMenu_second_son from './component/DeleteMenu_second_son.vue'
import AddMenu_second_son from './component/AddMenu_second_son.vue'
import AddMenu from './component/AddMenu.vue'


const AddMenuView = ref(false)
const AddMenu_srcond_sonView = ref(false)
const DeleteMenuView = ref(false)
const DeleteMenu_second_sonView = ref(false)


// 一级菜单
const Menu_List = ref()
const Menu = reactive(Menu_List)
//二级菜单
const Menu_second_List = ref()
const Menu_second = reactive(Menu_second_List)
//二级菜单-子
const MenuList_second_son_List = ref()
const MenuList_second_son = reactive(MenuList_second_son_List)
onMounted(() => {
  getMenuList_first().then((res) => {
    Menu_List.value = res.data
  })
  getMenuList_second().then((res) => {
    Menu_second_List.value = res.data
  })
  getAllMenuList_second_son().then((res) => {
    MenuList_second_son_List.value = res.data
  })
})
const dataSource = Menu
const dataSource_second = Menu_second
const dataSource_second_son = MenuList_second_son

//*单条数据
const Row_List = ref()
const Row = reactive(Row_List)
//* 赋值
const Index = (data) => {

  Row_List.value = data

}

const defaultProps = {
  children: 'children',
  label: 'menu_name',
  disabled: 'disabled',
}
const defaultProps_second = {
  children: 'children',
  label: 'menu_second_name',
  disabled: 'disabled',
  guid: 'menu_guid',
}







</script>
<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 80px;
}
</style>